<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    
</body>
<script>
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    /**
     * 创建react元素
     * 语法：React.createElement(标签名,{标签的属性},标签子元素,标签子元素,....)
     * 
     */
    const oSpan = React.createElement('span', {id:'bg1'}, 123, 222);
    console.log('virtual dom span: ', oSpan); 

    root.render(oSpan);
    
    // 以下是真实dom元素
    // const oRoot = document.querySelector('#root');
    // console.dir(oRoot); // 真实dom是大对象
    // const oDiv = document.createElement('div');
    // console.dir(oDiv);// 真实dom是大对象

</script>
</html>